<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    .myTitle {
        width: 155px;
        height: 55px;
        text-align: center;
        display: inline-block;
        font-size: 22px;
        line-height: 55px;
        border-bottom: 2px #005C34 solid;
        margin-left: 11px;
        color: #005C34;
    }


</style>

<style>
    .dis_row{
        display: flex;flex-direction: row;
    }
    .dis_column{
        display: flex;flex-direction: column;
    }
    .a_center{
        align-items: center;
    }
    .j_center{
        justify-content: center;
    }
    .discuss_top{
        background: #ffffff;margin-top: 0px;width: 100%;font-size: 16px;color: #999;
        border-bottom: 1px solid #dfdfdf;
        /* height: 150px;*/
        height: 80px;
    }
    .discuss_top_title{
        margin-top: 0px;width: 100%;color: #999;
        height: 80px;
    }
    .discuss_top_content{
        margin-top: 0px;width: 100%;color: #666;
        height: auto;
    }
    .discuss_list{
        background: #ffffff;margin-top: 0px;width: 100%;font-size: 16px;color: #999;
    }
    .discuss_buttons{
        margin-top: 0px;width: 100%;font-size: 16px;
        height: 200px;background-color: #f5f5f5;
    }
    .discuss_buttons_textarea{
        width: 85%;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #555;
        background: #ffffff;
        padding: 4px 4px;
    }
    .discuss_buttons_send{
        width: 100px;
        height: 35px;
        border-radius: 10px;
        background-color: #22ac38;
        color: #ffffff;
        text-align: center;

    }
    .active1 {
        border-bottom: 2px solid #005C34;
        color: #005C34
    }

    .spanChange:hover {
        cursor: pointer
    }

    .spanChange {
        font-size: 20px;
        margin: 0 30px
    }
</style>

<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div class="container">
        <div class="row">
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 我的课程</p>
    </div>
    <hr style="margin: 0 auto ;"/>
    <section style="display:flex;background:#F7F7F7;padding-top: 0">
        <div class="col-xs-3" style="height: 850px;padding:0;margin-right:10px;background-color: #fff">
            <ul id="personal_data">
                <li><a href="/cultivate/my">个人资料</a></li>
                <li><a href="/cultivate/myOrder">我的订单</a></li>
                <li class="this"><a href="/cultivate/myClasss/myClasss">我的班级</a></li>
                <li><a href="/cultivate/myCourse">我的课程</a></li>
                <li><a href="/cultivate/myCoursePlan">我的课程计划</a></li>
                <li><a href="/cultivate/studyRecord">学习记录</a></li>
                <li onclick="recruit()"><a>我的简历</a></li>
                <li><a href="/cultivate/deliverRecord">投递记录</a></li>
                <li><a href="/cultivate/applyRecord">申请记录</a></li>
                <li><a href="/cultivate/myMessage">消息中心</a></li>
                <li><a href="/cultivate/myCertificates">我的证书</a></li>
                <li><a href="/certificate/mock?grade=2" target="_blank">幼儿照护初级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=1" target="_blank">幼儿照护中级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=0" target="_blank">幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <div class="col-xs-9" style="padding:0;background-color: #fff">
            <div style="margin:20px 0;border-bottom: 1px solid #999;width: 100%; height: 80px;">
               <span onclick="intoStudentClass()" class="uc-ykt-course-card_btn " style="margin-bottom: 20px;margin-left: 20px;">加入班级</span>
            </div>
            <div class="bt50">
                <div class="rmtjkc aa">
                    <div class="xianshi">
                        <div class="qiehuan active">
                            <ul class="clear" id="course">
                            </ul>
                        </div>
                        <div id="page" class="page"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
    </section>
        </div>
    </div>
    <!-- 分页 -->
</div>
<div id="showDiv" style="display: none;">
    <span style="color: #f8ac59;border: 1px solid #f8ac59;width: 100px;height: 60px;">审核中</span>
    <!--<div style="font-size:18px;width: 100%;height: 70%;display:flex;flex-direction: column;justify-content: center;align-items: center;">
        <span style="height: 70px;margin-left: 0px;margin-top: 20px;">请输入班级号：</span>
        <input onchange="setNumber()" id="number" name="number" type="number" style="text-align: center; margin-left: 0px;margin-top: 20px;width: 300px; height: 70px;border-radius: 20px;border: 1px solid #005C34"/>
    </div>-->
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/mobile.js"></script>
</body>
<script>
    $(function () {
        var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;

        if(is_mobi){
            $("#course li").css("width:100%")
            $("#personal_data").find('li').eq(9).hide();
            $("#personal_data").find('li').eq(10).hide();
            $("#personal_data").find('li').eq(11).hide();

        }
        //班级数据
        getStudentClasses();
        /*$(".spanChange").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            console.log("data-type:"+$(this).attr("data-type"));
            //list($(this).attr("data-type"));
        });*/
    });

    var number ='';
    function setNumber(){
        let number2 = $("#number").val();
        console.log("number2:"+number2);
        number = number2;
        console.log("number:"+number);
    }

    function intoStudentClass() {
        //页面层
        layer.open({
            title: '加入班级',
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['550px', '300px'], //宽高
            content: "<div style=\"font-size:18px;width: 100%;height: 70%;display:flex;flex-direction: column;justify-content: center;align-items: center;\">\n" +
                "        <span style=\"height: 70px;margin-left: 0px;margin-top: 20px;\">请输入班级号：</span>\n" +
                "        <input onchange=\"setNumber()\" id=\"number\" name=\"number\" type=\"number\" style=\"text-align: center; margin-left: 0px;margin-top: 20px;width: 300px; height: 70px;border-radius: 20px;border: 1px solid #005C34\"/>\n" +
                "    </div>",//$("#showDiv").html(),
            btn: ['确定'],
            yes: function(index, layero){
                //do something
                //let number = $("#number").val();
                console.log("number:"+number);
                if(number!=undefined && number!='undefined' && number!=''){
                    ajaxToken("/jzApi/courses/intoStudentClass", 'POST',
                        {
                            number: number
                        }, function (res) {
                            console.log("res:"+res);
                            console.log("res:"+JSON.stringify(res));
                            if (res== 1) {
                                this.getStudentClasses();
                                layer.msg("申请已提交！");
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }else {
                                layer.msg(res);
                            }
                        }
                    )
                }else {
                    layer.alert("请输入班级号！");
                }
            }
        });
    }

    function getStudentClasses() {
        ajaxToken("/jzApi/courses/selMyClasssList", 'GET',
            {
                current: 1,
                number: 16
            }, function (res) {
                if (res.pages == 0) {
                    $("#course").html('<div class="noData" style="font-size: 18px;">暂无数据~</div>');
                } else {
                    var list = res.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        course += '<li>' +
                            '<div >' +
                            '<img src="' + item.thumbnail + '" alt="班级头像" style="border-radius: 200px;width: 200px;height: 200px;"/>' +
                            '<div style="padding: 10px">' +
                            '<h1 style="text-align: left;margin-bottom: 10px" >' + item.studentClassName + '</h1>' +
                            '<h3 style="text-align: left;margin-bottom: 10px;overflow: hidden;" >' + item.describe + '</h3>' +
                            '</div>' ;
                        let stateStr='';
                        if(item.status == 0){
                            stateStr+=' <div style="margin-top: 0px;width:100%; display:flex;flex-direction: row;justify-content: flex-end;align-items: center;"><span style="color: #f8ac59;border: 1px solid #f8ac59;width: auto;line-height: 30px;padding:0px 10px;text-align: center;">审核中</span></div>';
                        }else if(item.status == 1){
                            //stateStr+=' <div style="margin-top: 0px;width:100%; display:flex;flex-direction: row;justify-content: flex-end;align-items: center;"><span style="color: #1ab394;border: 1px solid #1ab394;width: auto;line-height: 30px;padding:0px 10px;text-align: center;">审核通过</span></div>';
                            stateStr+=' <div style="margin-top: 0px;width:100%; display:flex;flex-direction: row;justify-content: flex-end;align-items: center;">';

                            let redStr = '';
                            if(item.isHaveNewTasks == 1){
                                redStr+='       <span class="layui-badge-dot" style="position: absolute;margin-left: 10px;"></span>';
                            }

                            if(item.isHaveTasks == 1){
                                stateStr+='     <a  onclick="getTaskList(\''+item.classId+'\')" href="javascript:void(0);" style="float: left;" class="uc-ykt-course-card_btn">' +
                                    '               班级作业';
                                stateStr+=redStr;
                                stateStr+='     </a>';
                            }
                            let redStr2 = '';
                            if(item.isHaveNewExamnation == 1){
                                redStr2+='       <span class="layui-badge-dot" style="position: absolute;margin-left: 10px;"></span>';
                            }

                            if(item.isHaveExamnation == 1){
                                stateStr+='     <a  onclick="getExamnationList(\''+item.classId+'\')" href="javascript:void(0);" style="float: left;" class="uc-ykt-course-card_btn">' +
                                    '               班级考试';
                                stateStr+=redStr2;
                                stateStr+='     </a>';
                            }
                            stateStr+=' </div>';

                        }else if(item.status == 2){
                            stateStr+=' <div style="margin-top: 0px;width:100%; display:flex;flex-direction: row;justify-content: flex-end;align-items: center;"><span style="color: #ed5565;border: 1px solid #f8ac59;width: auto;line-height: 30px;padding:0px 10px;text-align: center;">审核失败</span></div>';
                        }
                        course += stateStr+
                            '</div>' +
                        '</li>';

                    });
                    course += '<div style="clear: both"></div>';
                    $("#course").html(course);
                    page(1, res.pages, '');
                }
            }
        )
    }

    function spanChange(type,that) {
        console.log("type:"+type);
        $(that).addClass("active1");
        $(that).siblings().removeClass("active1");
        console.log("data-type:"+$(that).attr("data-type"));
        if(type == 0){
            $("#waitList").show();
            $("#historyList").hide();
            $("#allList").hide();
        }else if(type == 1){
            $("#waitList").hide();
            $("#historyList").show();
            $("#allList").hide();
        }else if(type == 2){
            $("#waitList").hide();
            $("#historyList").hide();
            $("#allList").show();
        }
    }
    function getExamnationList(classId) {

        let contentStr = '';
        ajaxToken("/jzApi/courses/selCourseAndExamnation", 'POST',
            {
                current:1,
                number:10,
                classId: classId,
                courseId: '',
            },function (res) {
                if (res.data == 0) {
                    contentStr+='<div class="noData">暂无数据</div>';
                } else {
                    //console.log("res:"+JSON.stringify(res));
                    contentStr += '        <div class="dis_row j_center a_center" style="margin:20px 0;width: 100%;height: 100px;">\n' +
                        '                      <span data-type="1" class="active1 spanChange" onclick="spanChange(0,this)">待考试</span>\n' +
                        '                      <span data-type="0" class="spanChange" onclick="spanChange(1,this)">历史考试</span>\n' +
                        '                      <span data-type="0" class="spanChange" onclick="spanChange(2,this)">全部</span>\n' +
                        '                   </div>';

                    let waitList = '     <div id="waitList" class="list">';
                    let historyList = '  <div id="historyList" class="list">';
                    let allList = '      <div id="allList" class="list">';
                    var list = res.records;
                    list.forEach(function (item, index) {
                        let str ='';
                        // let startTime=item.startTime.format("yyyy年MM月dd日");
                        //let endTime=item.endTime.format("yyyy年MM月dd日");
                        str +='      <div class="list" style="display: flex;flex-direction: row;align-items: center;justify-content: center;border-bottom: 1px solid #edfdff; margin-top: 20px;">' +

                            '                    <div class="dis_row a_center" style="width: 70%; background: #f7f7f7;">\n' +
                            '                        <div id="icon_123" style="margin-right: 2px">\n' +
                            '                            <i id="icon_down_123" class="layui-icon layui-icon-down" aria-hidden="true" style="display: none;font-size: 16px;"></i>\n' +
                            '                            <i id="icon_right_123" class="layui-icon layui-icon-right" aria-hidden="true" style="font-size: 16px;"></i>\n' +
                            '                        </div>\n' +
                            '                        <span class="chapterTitle" style="font-weight:normal;width: auto; background: #f7f7f7;">' + item.name +'</span>\n' +
                            '                        <span class="chapterTitle" style="font-weight:normal;font-size: 14px;color: #999;margin-left: 30px;width: auto; background: #f7f7f7;">开始时间：'+item.startTimeStr+' - 截止时间：'+item.endTimeStr+'</span>\n';
                        if(item.isOver==1){
                            str +='           <span class="chapterTitle" style="font-weight:normal;font-size: 14px;color: red;width: auto; background: #f7f7f7;">(已截止)</span>\n';
                        }
                        str +='              <span class="chapterTitle" style="font-weight:normal;font-size: 14px;color: #999;width: auto; background: #f7f7f7;margin-left: 30px;">总分：'+item.sumMark+'</span>\n';
                        str+='           </div>\n' +
                            '                    <div class="dis_row a_center" style="width: 20%;justify-content: flex-end; background: #f7f7f7;">\n';
                        if(item.isOver==1) {
                            if(item.isSubmit==1){
                                str += '                <a href="/cultivate/study/studyClassesExamAnswerDetail?paperId=' + item.id + '">' +
                                '                           <div class="discuss_buttons_send dis_row a_center j_center " >\n' +
                                '                                查看答卷\n' +
                                '                            </div>\n' +
                                '                        </a>';
                            }else {
                                str +=
                                    '                           <div class="discuss_buttons_send dis_row a_center j_center " style="border: 0px solid #000;background-color:#f7f7f7; ">\n' +
                                    '                                \n' +
                                    '                            </div>\n';
                            }
                        }else {
                            if(item.isSubmit==1){
                                str += '              <a href="/cultivate/study/studyClassesExamAnswerDetail?paperId=' + item.id + '">' +
                                    '                           <div class="discuss_buttons_send dis_row a_center j_center " >\n' +
                                    '                                查看答卷\n' +
                                    '                            </div>\n' +
                                    '                        </a>';
                            }else {
                                str += '                <a href="/cultivate/study/studyClassesExam?id=' + item.id + '&type=">' +
                                    '                           <div class="discuss_buttons_send dis_row a_center j_center " >\n' +
                                    '                                前往考试\n' +
                                    '                            </div>\n' +
                                    '                   </a>';
                            }
                        }
                        str+='              </div>\n' +
                            '                </div>';

                        if(item.showType=="0"){
                            waitList += str;
                        }else if(item.showType=="1"){
                            historyList += str;
                        }
                        allList += str;
                    });
                    waitList +=  '</div>';
                    historyList +=  '</div>';
                    allList +=  '</div>';
                    contentStr += waitList;
                    contentStr += historyList;
                    contentStr += allList;
                }

                //页面层
                layer.open({
                    title: '班级考试列表',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['90%', '600px'], //宽高
                    content: contentStr,
                    btn: []
                });
                $("#waitList").show();
                $("#historyList").hide();
                $("#allList").hide();
            }
        )

    }


    function getTaskList(classId) {

        let contentStr = '';
        ajaxToken("/jzApi/courses/selCourseAndTask", 'POST',
            {
                current:1,
                number:10,
                classId: classId,
                courseId: '',
            },function (res) {
                if (res.data == 0) {
                    contentStr+='<div class="noData">暂无数据</div>';
                } else {
                    //console.log("res:"+JSON.stringify(res));
                    var list = res.records;
                    list.forEach(function (item, index) {
                        // let startTime=item.startTime.format("yyyy年MM月dd日");
                        //let endTime=item.endTime.format("yyyy年MM月dd日");
                        contentStr +='      <div class="list" style="display: flex;flex-direction: row;align-items: center;justify-content: center; border-bottom: 1px solid #edfdff; margin-top: 20px;">\n' +
                            '                    <div class="dis_row a_center" style="width: 70%; background: #f7f7f7;">\n' +
                            '                        <div id="icon_123" style="margin-right: 2px">\n' +
                            '                            <i id="icon_down_123" class="layui-icon layui-icon-down" aria-hidden="true" style="display: none;font-size: 16px;"></i>\n' +
                            '                            <i id="icon_right_123" class="layui-icon layui-icon-right" aria-hidden="true" style="font-size: 16px;"></i>\n' +
                            '                        </div>\n' +
                            '                        <span class="chapterTitle" style="font-weight:normal;width: auto; background: #f7f7f7;">' + item.title +'</span>\n' +
                            '                        <span class="chapterTitle" style="font-weight:normal;font-size: 14px;color: #999;margin-left: 30px;width: auto; background: #f7f7f7;">开始时间：'+item.startTimeStr+' - 截止时间：'+item.endTimeStr+'</span>\n';
                        if(item.isOver==1){
                            contentStr +='           <span class="chapterTitle" style="font-weight:normal;font-size: 14px;color: red;width: auto; background: #f7f7f7;">(已截止)</span>\n';
                        }
                        contentStr+='           </div>\n' +
                            '                    <div class="dis_row a_center" style="width: 20%;justify-content: flex-end; background: #f7f7f7;">\n' +
                            '                        <a href="/cultivate/study/studyInfo?id=' + item.coursesId +'&isTestScores=undefined&classId=' + item.classId +'&taskId=' + item.id +'&classId=">'+
                            '                           <div class="discuss_buttons_send dis_row a_center j_center " >\n' +
                            '                                查看作业\n' +
                            '                            </div>\n' +
                            '                        </a>' +
                            '                    </div>\n' +
                            '                </div>';
                    });

                }

                //页面层
                layer.open({
                    title: '班级作业列表',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['90%', '600px'], //宽高
                    content: contentStr,
                    btn: []
                });
            }
        )

    }


    function page(num, tolPages, state) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                ajaxToken("/jzApi/courses/selMyClasssList", 'GET',
                    {
                        current: 1,
                        number: 16
                    }, function (res) {
                        if (res.pages == 0) {
                            $("#course").html('<div class="noData">暂无数据</div>');
                        } else {
                            var list = res.records;
                            var course = '';
                            list.forEach(function (item, index) {
                                var b = '';
                                if (res.type == 0) {
                                    b = '<span style="color: #FF9500">(证书课程)</span>'
                                } else if(res.type == 1){
                                    b = '<span style="color: #569175">(师资培训课程)</span>'
                                } else if(res.type == 2){
                                    b = '<span style="color: #569175">(考评员培训课程)</span>'
                                } else if(res.type == 3){
                                    b = '<span style="color: #569175">(高级师资培训课程)</span>'
                                } else if(res.type == 4){
                                    b = '<span style="color: #569175">(高级考评员培训课程)</span>'
                                }
                                course += '<li>' +
                                    '<div style="position: relative">' +
                                    '<img class="bg-img" src="' + item.thumbnail + '" alt="图片"><div class="bg-black"></div><div class="bg-text">已完成：' + item.process + '</div></div>' +
                                    '<div style="padding: 10px">' +
                                    '<h1 style="text-align: left;margin-bottom: 10px">' + item.name + b + '</h1>' +
                                    '   <h2 style="text-align: right">' +
                                    '       <span style="color: #666">讲师：' + item.teacherName + '</span>' +
                                    '   </h2>' +
                                    '</div>' +
                                    '<div style="margin-top: 10px"><a style="float: left;" class="uc-ykt-course-card_btn">开始学习</a>' +
                                    '<a style="float: right;" class="uc-ykt-course-card_btn">答题解析</a><div style="clear: both"></div></div>' +
                                    '</li>'
                            });
                            $("#course").html(course);
                        }
                    }
                )
            }
        });
    }
</script>
</html>